// components/cancel-dialog/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 控制弹窗显示/隐藏
    visible: {
      type: Boolean,
      value: false
    },
    // 弹窗标题
    title: {
      type: String,
      value: '取消订单原因'
    },
    // 输入框占位文本
    placeholder: {
      type: String,
      value: '请输入取消原因'
    },
    // 取消按钮文字
    cancelText: {
      type: String,
      value: '取消'
    },
    // 保存按钮文字
    saveText: {
      type: String,
      value: '保存'
    },
    // 是否必须填写原因
    required: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    // 取消原因内容
    cancelReason: '',
    // 是否显示输入框焦点
    focused: false
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 显示弹窗
     */
    show() {
      this.setData({
        visible: true,
        cancelReason: ''
      });
    },

    /**
     * 隐藏弹窗
     */
    hide() {
      this.setData({
        visible: false,
        cancelReason: '',
        focused: false
      });
      // 触发关闭事件
      this.triggerEvent('close');
    },

    /**
     * 点击背景遮罩关闭弹窗
     */
    onOverlayTap() {
      this.hide();
    },

    /**
     * 阻止弹窗内容区域的点击事件冒泡
     */
    onContentTap() {
      // 阻止事件冒泡，防止点击内容区域关闭弹窗
    },

    /**
     * 输入框内容变化
     */
    onInputChange(e) {
      this.setData({
        cancelReason: e.detail.value
      });
    },

    /**
     * 输入框获得焦点
     */
    onInputFocus() {
      this.setData({
        focused: true
      });
    },

    /**
     * 输入框失去焦点
     */
    onInputBlur() {
      this.setData({
        focused: false
      });
    },

    /**
     * 点击取消按钮
     */
    onCancel() {
      this.hide();
      // 触发取消事件
      this.triggerEvent('cancel');
    },

    /**
     * 点击保存按钮
     */
    onSave() {
      const reason = this.data.cancelReason.trim();
      
      // 如果设置为必填但未填写内容
      if (this.properties.required && !reason) {
        wx.showToast({
          title: '请输入取消原因',
          icon: 'none',
          duration: 2000
        });
        return;
      }

      this.hide();
      // 触发保存事件，传递取消原因
      this.triggerEvent('save', {
        reason: reason
      });
    },

    /**
     * 检查保存按钮是否可用
     */
    _checkSaveButtonEnabled() {
      if (!this.properties.required) {
        return true;
      }
      return this.data.cancelReason.trim().length > 0;
    }
  },

  /**
   * 监听属性变化
   */
  observers: {
    'visible': function(visible) {
      if (visible) {
        this.setData({
          cancelReason: '',
          focused: false
        });
      }
    }
  }
})
